<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/swiper-bundle.min.css">
    <!-- <link rel="stylesheet" href="./css/public.css"> -->
    <link rel="stylesheet" href="./css/css1.css">
</head>

<body style="padding: 50px 200px;">
    <div class="training_base">
        <div class="tb_top mg">
            <div class="tb_top_img swiper-container" id="gallery">
                <div class="swiper-wrapper" id="gallery2">
                    <div class="swiper-slide" style="background-image:url(./img/21.png)"></div>
                    <div class="swiper-slide" style="background-image:url(./img/21.png)"></div>
                    <div class="swiper-slide" style="background-image:url(./img/21.png)"></div>
                    <div class="swiper-slide" style="background-image:url(./img/21.png)"></div>
                    <div class="swiper-slide" style="background-image:url(./img/21.png)"></div>

                </div>
            </div>
        </div>

        <div class="tb_bottom">
            <ul class="swiper-container swiper-container-thumbs" id="thumbs" style="height: 100%;">
                <div class="swiper-wrapper" id="thumbs2">
                    <div class="swiper-slide test" style="background-image:url(./img/21.png)"></div>

                    <div class="swiper-slide test" style="background-image:url(./img/21.png)"></div>

                    <div class="swiper-slide test" style="background-image:url(./img/21.png)"></div>
                    <div class="swiper-slide test" style="background-image:url(./img/21.png)"></div>
                    <div class="swiper-slide test" style="background-image:url(./img/21.png)"></div>

                </div>
            </ul>
            <!-- 如果需要导航按钮 -->
            <button class="swiper-button-prev">〉</button>
            <button class="swiper-button-next">〉</button>
        </div>
    </div>

    

    <script src="./js/swiper-bundle.min.js"></script>
    <script src="./js/jquery-2.1.1.min.js"></script>
    <script>


        var gallerySwiper = new Swiper('#gallery', {
            autoplay: {
                disableOnInteraction: false,
            },

            pagination: {
                el: '.swiper-pagination',
            },
            spaceBetween: 10,
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            
            thumbs: {
                swiper: {
                    el: '#thumbs',
                    spaceBetween: 30,
                    slidesPerView: 4,
                    watchSlidesVisibility: true,/*避免出现bug*/
                },
            }
        })

    </script>
</body>

</html>